<template>
  <view class="component-container" v-if="isShow">
    <view class="content">
      <view v-for="(option, index) in props.options" :key="index" @click="chooseOption(option.value!)" class="option"
        ><uni-icons :type="iconAndValueMap[option.value ?? '']" size="25" color="#333333"></uni-icons>&nbsp;
        {{ option.name }}</view
      >
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import type { ReceivingMethodObject } from '../type'
import { ReceivingMethod } from '@/enum/ReceivingMethod'
const props = defineProps({
  modelValue: {
    type: String
  },
  options: {
    type: Object as () => ReceivingMethodObject[]
  }
})
const emits = defineEmits<{
  (e: 'update:modelValue', value: string): void
  (e: 'update:options', value: ReceivingMethodObject[] | null): void
}>()
// 选项的value与iconName的映射
const iconAndValueMap: { [key: string]: any } = {}
iconAndValueMap[ReceivingMethod.SHOP_EAT] = 'shop-filled'
iconAndValueMap[ReceivingMethod.SELF_PICKUP] = 'gift-filled'

const isShow = ref(false)
watch(
  () => props.options,
  (newVal, oldVal) => {
    if (newVal == null || newVal.length < 2) return
    isShow.value = true
  }
)

// 用户选择
function chooseOption(receivingMethod: string) {
  emits('update:modelValue', receivingMethod)
  // 清空表单
  emits('update:options', null)
  isShow.value = false
}
</script>

<style scoped lang="scss">
.component-container {
  $padding-size: 20rpx;

  position: fixed;
  z-index: 2001;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #00000043;
  inset: 0;

  .content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5%;
    width: 80%;
    border-radius: $padding-size;
    background-color: #fff;
    flex-direction: column;
    box-sizing: border-box;

    .option {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 20rpx 0rpx;
      padding: 30rpx 0rpx;
      width: 100%;
      font-size: 30rpx;
      border-radius: $padding-size;
      text-align: center;
      background-color: #f5f5f5;
      box-sizing: border-box;
    }
  }
}
</style>
